<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合能源算法管理平台-调优效果</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/effect.css">
</head>

<body>
  <a href="./login.html" class="back"></a>

  <img src="./images/123.png" class="bg1" alt="">
  <img src="./images/123.png" class="bg2" alt="">

  <!-- 公共头部 -->
  <div class="header">
    <a href="./testing.html">调优监测</a>
    <a href="./effect.html" class="active">调优效果</a>
    <a href="./manage.html">碳排管理</a>
    <a href="#">产品单耗</a>
  </div>

  <!-- 中心图片 -->
  <img src="./images/11111.png" class="center-img" alt="">

  <!-- 中心标题 -->
  <img src="./images/编组 7@2x 2.png" class="center-title1" alt="">
  <img src="./images/123321.png" class="center-title2" alt="">

  <!-- 底部图片 -->
  <img src="./images/footer@2x.png" class="footer" alt="">

  <!-- 卡片 -->
  <div class="box box1">
    <div class="left">
      <div class="column1">
        <span class="price">￥18277</span>
      </div>
      <span class="info">常规运行模式</span>
    </div>
    <div class="center">
      <img src="./images/位图_1@2x.png" alt="" class="center1">
      <img src="./images/形状结合@2x.png" alt="" class="center2">
      <div class="number">27.78%</div>
    </div>
    <div class="right">
      <div class="column2">
        <span class="price">￥13200</span>
      </div>
      <span class="info">AI运行模式</span>
    </div>
  </div>

  <div class="box box2">
    <div class="left">
      <div class="column1">
        <span class="price">￥23328</span>
      </div>
      <span class="info">常规运行模式</span>
    </div>
    <div class="center">
      <img src="./images/位图_1@2x.png" alt="" class="center1">
      <img src="./images/形状结合@2x.png" alt="" class="center2">
      <div class="number">24.9%</div>
    </div>
    <div class="right">
      <div class="column2">
        <span class="price">￥17519</span>
      </div>
      <span class="info">AI运行模式</span>
    </div>
  </div>

  <div class="box box3">
    <div class="left">
      <div class="column1">
        <span class="price">￥398</span>
      </div>
      <span class="info">常规运行模式</span>
    </div>
    <div class="center">
      <img src="./images/位图_1@2x.png" alt="" class="center1">
      <img src="./images/形状结合@2x.png" alt="" class="center2">
      <div class="number">12.67%</div>
    </div>
    <div class="right">
      <div class="column2">
        <span class="price">￥348</span>
      </div>
      <span class="info">AI运行模式</span>
    </div>
  </div>

  <div class="box box4">
    <div class="left">
      <div class="column1">
        <span class="price">￥4153</span>
      </div>
      <span class="info">常规运行模式</span>
    </div>
    <div class="center">
      <img src="./images/位图_1@2x.png" alt="" class="center1">
      <img src="./images/形状结合@2x.png" alt="" class="center2">
      <div class="number">16.40%</div>
    </div>
    <div class="right">
      <div class="column2">
        <span class="price">￥3472</span>
      </div>
      <span class="info">AI运行模式</span>
    </div>
  </div>

  <div class="box5"></div>

  <script src="./js/data.js"></script>
  <script src="./lib/echarts.min.js"></script>
  <script>

    // 文本大小缩放
    // 改变图表字体大小
    function transformFontSize(fontsize) {
      // 获取屏幕宽度
      const width = document.body.scrollWidth;
      const ratio = width / 1920;
      return parseInt(fontsize * ratio);
    }


    let myChart5 = echarts.init(document.querySelector('.box5'))
    let option5 = {
      title: {
        text: '单位：元',
        right: 0,
        textStyle: {
          fontSize: transformFontSize(14),
          color: '#ccc',
        }
      },
      textStyle: {
        fontSize: transformFontSize(14),
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      grid: {
        left: '0%',
        top: '10%',
        bottom: '0%',
        containLabel: true,
        right: '20%'
      },
      xAxis: {
        type: 'value',
        show: false,
        axisLabel: {
          fontSize: transformFontSize(14)
        },
      },
      yAxis: {
        inverse: true,
        type: 'category',
        data: [
          "24230035订单",
          "24230547订单",
          "24231699订单",
          "24210619订单",
          "24212153订单",
        ],
        axisLabel: {
          fontSize: transformFontSize(14),
          color: '#fff'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 1, color: '#1679d1' // 0% 处的颜色
            }, {
              offset: 0, color: '#60f8ff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          name: '碳排放',
          type: 'bar',
          itemStyle: {
            borderRadius: [6, 6, 6, 6] // 这里设置圆角的大小
          },
          label: {
            color: '#00E6FF',
            show: true,
            position: 'right'
          },
          emphasis: {
            focus: 'series'
          },
          data: [
            348501.68, 319459.87, 302034.79, 249759.54, 145209.03
          ],
          barWidth: '40%',
        }
      ]
    };
    myChart5.setOption(option5)
    // echarts跟随屏幕变化而适配-----------------------
    window.addEventListener("resize", function () {
      myChart5.resize()
    })
  </script>
</body>

</html>